import * as React from 'react';
import * as ReactSwiper from 'react-swipe';
interface Props {
    sliders: any[],
    changeIndex: any
}

export default class SwiperItem extends React.Component<Props> {
    render() {
        let { sliders, changeIndex } = this.props;
        return (
            sliders.length > 0 ? (
                <ReactSwiper
                    className="carousel"
                    swipeOptions={{
                        auto: 500,
                        continuous: true,
                        callback(selectedIndex:number) {
                            changeIndex(selectedIndex)
                        }
                    }}
                >
                    {
                        sliders.map((item, index) => {
                            return <div key={index}>
                                <img style={{ width: '100%' }} src={item} />
                            </div>
                        })
                    }
                </ReactSwiper>
            ) : null
        )
    }
}
